<template>
<div class="page">
    <nav class="top-nav">
        <img src="../assets/logo.png" class="logo">
        <div class="space"></div>
        <div class="power">
            <Icon style="font-size:24px;color:#fff" type="power"></Icon>
        </div>

    </nav>
   
        <div class="menus">
            <div class="user-header">
                <Avatar class="avatar" :src="avatar"></Avatar>

                <p class="username">Hi~! {{username}}</p>
                <p class="welcome">欢迎您回来！！</p>
            </div>

            <Menu theme="dark">
                <Submenu name="/user">
                    <template slot="title">
                        <Icon type="ios-people"></Icon>
                        用户管理
                    </template>
                    <MenuItem name="/user/users">用户列表</MenuItem>
                    <MenuItem name="/user/admins">管理员列表</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>
                        统计分析
                    </template>
                    <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                    </MenuGroup>
                </Submenu>
            </Menu>
        </div>


</div>
</template>

<script>
export default {
    name: 'Layout',
    computed: {
        avatar: function() {
            if (this.$store.state.user) {
                return this.$store.state.avatar;
            } else {
                return ''
            }
        },
        username: function() {
            if (this.$store.state.user) {
                return this.$store.state.user.name;
            } else {
                return ''
            }
        }
    },
    data() {
        return {

        }
    }
}
</script>

<style lang="less" scoped>
.page {
    background: #f0f0f0;
    height: 100%;
    position: relative;
    .top-nav {
        background: #2ab27b;
        height: 60px;
        z-index: 1000;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        box-shadow: #f0f0f0 2px 2px 2px;
        align-items: center;
        flex-direction: row;
        .logo {
            padding: 4px;
            background: #ffffff;
            width: 40px;
            margin-left: 12px;
        }
        .space {
            flex: 1
        }
        .power {
            width: 60px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }
    .menus {
        background: #363e4f;
        position: absolute;
        height: 100%;
        left: 0;
        width: 240px;
        top: 0;
         overflow: auto;
       
        .user-header {
            text-align: center;
            margin-top: 60px;
            background: #ffffff;
            padding-bottom: 12px;
            .avatar {
                margin-top: 24px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            .username,.welcome {
                margin-top: 12px;
                font-size: 12px;
                color: #888888;
            }
        }
    }
}
</style>